// 页面权限控制 路由守卫
import router from '@/router' // 引入路由实例
import store from '@/store' // 引入 vuex store实例
// 进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 白名单是不需要token就可以访问的页面
const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  NProgress.start()
  const token = store.getters.token
  if (token) { // 判断是否有token
    if (to.path === '/login') { // 如果有token，不让跳转到登录页，重定向到首页
      router.push('/')
    } else { // 不是跳转到登录页放行
      // 在这里获取用户数据，解决了两个获取用户的需求
      // 1.获取用户数据的请求是需要token的，所以必须保证有token
      // 2.在本次项目是需要根据获取的用户数据，在还没有跳转到首页的时候拿到数据并渲染
      // 这里就很好的解决了这个问题，这里既可以保证有token也可以保存没有跳转页面

      // 由于我调取用户请求的位置，位于控制路由跳转的钩子函数里面，每次跳转都有可能会执行
      // 只要token存在，我每次点击左侧导航，都会发起获取用户数据请求
      // 优化  根据vuex里的userInfo里的userId 来判断，只要没有就允许发起请求，有没不允许发送
      if (!store.getters.userId) {
        await store.dispatch('user/getUserInfo')
      }
      next()
    }
  } else {
    if (whiteList.includes(to.path)) { // 没有token的时候，跳转到路径是否在白名单内，在的话就方向，否则跳转到登录页
      next()
    } else {
      router.push('/login')
    }
  }
  // 关闭进度条
  NProgress.done() // 手动强制关闭一次  为了解决 手动切换地址时  进度条的不关闭的问题
})
